<template>
    <el-card shadow="never">
    <!-- 头部 -->
    <el-row :gutter="20" class="mb30">
      <el-col :span="4"
        ><el-input size="mini" v-model="searchInfo" placeholder="用户名称" clearable></el-input
      ></el-col>
      <el-button size="mini" type="primary" class="el-icon-search" @click="toSearch"
        >查询</el-button
      >
      <el-button size="mini">清空</el-button>
    </el-row>
    <el-button type="primary" size="mini" @click="dialogFormVisible = true"
      >添加</el-button
    >
    <el-button type="danger" size="mini" disabled>批量删除</el-button>
    <!-- 主体部分 -->
    <el-table
      stripe
      class="mt20"
      :data="this.tableState.items"
      border
      style="width: 80%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" label="序号" align="center" width="80">
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="500px">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        align="center"
        fixed="right"
        width="250px"
      >
      <!-- 插槽 -->
      <template v-slot="{row}">
          <el-button size="small" type="info" class="el-icon-info" title="分配权限"
            @click="$router.push(`/acl/role/auth?id=${row.id}&roleName=${row.roleName}`)"/>
          <el-button size="small" type="primary" class="el-icon-check" title="确定" 
            @click="updateRole(row)"/>
          <el-button size="small" type="primary" class="el-icon-edit-outline" title="修改角色" 
            @click="row.edit= true" />
          <el-button size="small" type="danger" class="el-icon-delete" title="删除角色"
            @click="removeById(row.id)"/>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.paramsState.page"
      :page-sizes="[3, 5, 10, 20]"
      :page-size="this.paramsState.limit"
      layout="prev, pager, next, jumper , -> , sizes , total"
      :total="this.tableState.total"
    >
    </el-pagination>

    <!-- 添加弹框 -->

    <el-dialog title="添加角色" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="请输入新名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlerRole"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import roleApi from "@/api/acl/role";
export default {
  name: "Role",
  data() {
    return {
      searchInfo:'',
      paramsState: {
        page: 1,
        limit: 5,
      },
      tableState: {
        total: 0,
        items: [
          {
            id: "",
            roleName: "", //角色名称
          },
        ],
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getPageList();
  },
  methods: {
    updateRole(){
      console.log("opop")
    },
  async  toSearch(){
    const result =  await roleApi.getPageList(this.paramsState.page,this.paramsState.limit,{roleName:this.searchInfo})
    this.tableState.items = result.data.items
    console.log(this.searchInfo)
    console.log(result)
      // console.log(this.searchInfo)
      // this.getPageList(1,5,"大")
    },
    // 保存角色
    handlerRole(){
      const roleObj = {
        roleName:this.form.name
      }
      this.saveRole(roleObj)
      this.getPageList()
      this.dialogFormVisible = false
      this.form.name = ''
    },
    /**
     * 发送save角色请求
     */
   async saveRole(role){
      await roleApi.save(role)
    }, 
    /**
     * 删除单个
     */
    async removeById(id) {
      try {
        await roleApi.removeById(id)
        this.getPageList()
      } catch (e) {
        this.$message({ message: "失败", type: "danger" });
      }
    },

    /**
     * 获取数据
     */
    async getPageList(
      page = this.paramsState.page,
      limit = this.paramsState.limit
    ) {
      try {
        this.paramsState.page = page;
        this.paramsState.limit = limit;
      
        const result = await roleApi.getPageList(page, limit);
        console.log(result);
        this.tableState.items = result.data.items;
        this.tableState.total = result.data.total;
      } catch (error) {
        this.$message({ message: "获取列表失败", type: "waring" });
      }
    },
    handleSizeChange(val) {
      this.paramsState.limit = val;
      this.getPageList();
    },
    handleCurrentChange(val) {
      this.paramsState.page = val;
      this.getPageList();
    },
  },
};
</script>

<style scoped>

</style>